<template>
  <!-- 顶部操作栏 -->
  <div class="topTool">
    <!-- 输入 & 选择框：1.用户ID  2.用户名  3.手机号 -->
    <div class="mt-4">
      <el-input v-model="input" placeholder="搜索内容" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="搜索方式" style="width: 115px;background-color: rgba(254,240,240,0.5)">
            <el-option label="用户ID" value="1" />
            <el-option label="用户名" value="2" />
            <el-option label="手机号" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" style="width: 50px;background-color: rgba(254,240,240,0.5)" @click="handleSearch"/>
        </template>
      </el-input>
    </div>
  </div>
  <!-- el-table数据表格组件 -->
  <el-table
      :data="userData"
      :header-cell-style="{ background: 'rgb(254,240,240,0.8)'}"
      empty-text="暂无数据"
      style="margin-top: 20px;width: 100%;"
      border
  >
    <!-- 基本信息 -->
    <el-table-column prop="customerId" label="用户ID" sortable width="100px"></el-table-column>
    <el-table-column prop="customerUsername" label="用户名"></el-table-column>
    <el-table-column prop="customerHeadImage" label="用户头像" width="90px">
      <template #default="scope">
        <img :src="'http://localhost:8080/api/file/' + scope.row.customerHeadImage" style="width: 65px;height: 65px">
      </template>
    </el-table-column>
    <el-table-column prop="customerPhone" label="手机号" width="150px"></el-table-column>
    <el-table-column prop="customerGender" label="性别" width="85px">
      <template #default="scope">
        <el-tag
            :type="scope.row.hanfuTypeGender === '男' ? 'primary' : 'danger'"
            round
        >
          {{ scope.row.customerGender === '男' ? '男性' : '女性' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="customerBirthday"
        label="出生日期"
        sortable
        width="150px"
    ></el-table-column>
    <!-- 操作：1.删除 -->
    <el-table-column label="操作" width="73px">
      <template #default="{ row }">
        <el-button size="small" dark @click="handleDelete(row)" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
      background
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      style="margin-top: 5px;--el-color-primary: rgb(236,47,27);--el-pagination-button-bg-color: #fff;"
  />
</template>

<script setup>
import {Search} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {adminApi} from "../../api/app";
import {ElMessage, ElMessageBox} from "element-plus";

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

//定义用户信息数据
const userData = ref([]);
const currentPage = ref(1); //定义当前页码
const pageSize = ref(5); //定义每页显示记录数
const total = ref(0); //总记录数
//获取当前页数据
const getData = () => {
  adminApi.getAllCustomer({
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }).then(response => {
    userData.value = response.records;
    total.value = response.total;
  })
};
//处理页码变化点击事件
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  if(input.value.length > 0) {
    handleSearch();
  } else getData();
};

const input = ref(''); // 搜索框输入信息
const select = ref('1'); // 搜索方式选择栏信息
// 处理搜索
const handleSearch = () => {
  if (input.value.length > 0) { // 输入框有内容，根据内容查询数据
    if(select.value === '1') { // 用户ID
      adminApi.getCustomerById({
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        customerId: input.value
      }).then(response => {
        userData.value = response.records;
        total.value = response.total;
      })
    } else if(select.value === '2') { // 用户名
      adminApi.getCustomerByUsername({
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        customerUsername: input.value
      }).then(response => {
        userData.value = response.records;
        total.value = response.total;
      })
    } else { // 手机号
      adminApi.getCustomerByPhone({
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        customerPhone: input.value
      }).then(response => {
        userData.value = response.records;
        total.value = response.total;
      })
    }
  } else { // 输入框无内容，显示所有数据
    getData()
  }
}

// 处理删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '确认要删除该条记录吗？',
      '注意',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    adminApi.deleteCustomer({
      customerId: row.customerId
    }).then(response => {
      ElMessage({ type: 'success',message: '删除成功！' });
      getData();
    }).catch(error => {
      console.error(error);
    });
  }).catch(() => {
    ElMessage({ type: 'info',message: '取消删除。' });
  })
}
</script>

<style scoped>
.topTool {
  display: flex;
  justify-content: space-between; /* 元素沿着主轴均匀分布 */
  align-items: center; /* 元素在交叉轴上居中对齐 */
  z-index: 0;
  position: relative;
}
.topTool .mt-4 {
  flex: 1; /* 让这个元素占据剩余空间 */
}
table {
  width: 1000px;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.photo {
  height:180px;
  text-align: center;
}
th,td {
  height: 40px;
  width: 100px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
th {
  background-color: rgba(198, 226, 255, 0.35);
}
td {
  padding-left: 5px;
}
p {
  margin-top: 5px;
}
.el-pagination :deep(.el-pager li),
.el-pagination :deep(.btn-prev),
.el-pagination :deep(.btn-next){
  border: 1px solid #dcdfe6;
}
</style>